/*
 * Author： Lee
 * Create Time: 2018-02-01
 * Description: 竖直水箱
 * CopyRight:
 **/

import React, {Component} from 'react';

import './index.css';

export default class VerticalTank extends Component {
  constructor( props) {
    super( props);
    console.log( 'VerticalTank props', this.props);
    /*
     * * props 参数说明
     * x：相对位置x坐标
     * y: 相对位置y坐标
     * width： 宽度
     * height：高度
     * color: 水流颜色
     * 管道的默认颜色 #949494
     * state状态表示，是否有水流, 默认颜色： #1830fb
     * waterHeight: 水流高度
     * */
    this.state = {
      fill: this.props.fill ? this.props.fill : false,
    };
  }

  render() {
    return (
      <svg className="VerticalTankBox tank" label={this.props.label ? this.props.label : 'VerticalTank'} x={ this.props.x ? this.props.x : "25"} y={ this.props.y ? this.props.y : "26"} width={ this.props.width ? this.props.width : "100"} height={ this.props.height ? this.props.height : "100"}>
        <svg className="VerticalTankContent" viewBox="0 0 100 100">
          <rect x="3%" y="10%" width="94%" height="80%" fill="#949494">
          </rect>
          <path d="M3,10 A105,90 0 0 1 97,10  Z" fill="#949494">
          </path>
          <path d="M3,90 A105,90 0 0 0 97,90  Z" fill="#949494">
          </path>
          <rect x="0%" y="10%" rx="1%" ry="1%" width="100%" height="3%" fill="#949494">
          </rect>
          <rect x="0%" y="87%" rx="1%" ry="1%" width="100%" height="3%" fill="#949494">
          </rect>
        </svg>
        <svg x="0" y="0" width={ this.props.width ? this.props.width : "100"} height={ this.props.height ? this.props.height : "100"} className="tankCutaway">
          <svg width="100%" height="100%" viewBox="0 0 100 100">
            <clipPath>
              {/* waterHeight max: 70%*/}
              <rect x="15%" y="15%" width="70%" height={ this.props.waterHeight ? "" + this.props.waterHeight + "%" : "70%"}>
              </rect>
            </clipPath>
            <path d="M75,15 L85,25 L75,35 L85,45 L75,55 L85,65 L75,75 L85,85     L25,85   L15,75 L25,65 L15,55 L25,45 L15,35 L25,25 L15,15 Z" fill="#949494">
            </path>
            <path d="M75,15 L85,25 L75,35 L85,45 L75,55 L85,65 L75,75 L85,85     L25,85   L15,75 L25,65 L15,55 L25,45 L15,35 L25,25 L15,15 Z" fill={ this.props.color ? this.props.color : '#666'}>
            </path>
          </svg>
        </svg>
      </svg>

    )
  }
}

